
import {computed} from 'vue'
import { PC_DEVICE_WIDTH } from "../constants"
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()


/**
 * 
 *  用于判断移动端还是PC端，依据： 通过判断窗口大小是否小于指定窗口大小来判断是否是移动端
 * 
 */
export const isMobileTerminal = computed(() => {
    return width.value < PC_DEVICE_WIDTH
})


/*
 *@description: 动态指定 rem 基准值 ，最大为40px
 * 根据用户屏幕宽度计算得到fontsize 值赋给html标签
 *@author: Mr.Tang
 *@date: 2023-11-27 22:39:52
 *@version: V1.0
*/
export const useREM = () => {
    //定义最大的fontSize
    const MAX_FONT_SIZE = 40 
    //html 文档被解析完成的触发事件
    document.addEventListener('DOMContentLoaded',() => {
        const html = document.querySelector('html')
        //计算fontSize 为屏幕宽度的十分之一
        let fontSize = window.innerWidth / 10 
        fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
        //赋值给html标签
        html.style.fontSize = fontSize + 'px'
    })
}